<template>
    <div>
        <div>
            <el-divider content-position="left">您具有一定的操作权限</el-divider>
        </div>

        <div>
            <el-divider>
                <span id="spanlittlepart">查询</span>
            </el-divider>
        </div>

        <!-- 查询 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="天气" style="width: 200px;">
                <el-select v-model="weatherChosen" class="m-2" placeholder="晴/雨/阴">
                    <el-option v-for="item in weatherOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="环境" style="width: 200px;">
                <el-select v-model="placeChosen" class="m-2" placeholder="室内/室外/阳台">
                    <el-option v-for="item in placeOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item style="width: 200px;">
                <el-button @click="search" type="primary" plain style="width: 200px;">查询</el-button>
            </el-form-item>
        </el-form>

        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>

        <!-- 展示表格 -->
        <el-table :data="tableData" style="width: 100%" :highlight-current-row="true">
            <el-table-column label="图片" width="200">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        <el-image
                            style="width: 100px; height: 100px; padding-left: -30px;margin-left: -30px; overflow: visible;"
                            :src="baseURL + tableData[scope.$index].bgimg" :preview-src-list="[baseURL + tableData[scope.$index].bgimg]"
                            :preview-teleported="true" :initial-index="scope.$index" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="bgweather" label="天气" width="" :filters="[
                { text: '晴', value: '晴' },
                { text: '雨', value: '雨' },
                { text: '阴', value: '阴' },
            ]" :filter-method="filterHandler" />
            <el-table-column prop="bgplace" label="环境" width="" :filters="[
                { text: '室内', value: '室内' },
                { text: '室外', value: '室外' },
                { text: '阳台', value: '阳台' },
            ]" :filter-method="filterHandler" />
            <el-table-column fixed="right" label="操作" width="200">
                <template #default="scope">
                    <el-button link type="primary" size="small"
                        @click.prevent="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button link type="primary" size="small"
                        @click.prevent="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>

        <el-pagination background layout="prev, pager, next" :current-page="page" @update:current-page="handleCurrentChange"
            :total="total" :page-size="size" style="bottom: 0; text-align: center;margin-left: 45%;margin-top: 5px;" />

        <!-- Form -->
        <el-dialog v-model="dialogFormVisible" title="编辑">
            <!-- <el-form :model="form">
                <el-form-item label="天气" :label-width="formLabelWidth">
                    <el-select v-model="form.bgweather" placeholder="请选择晴/雨/阴">
                        <el-option label="晴" value="晴" />
                        <el-option label="雨" value="雨" />
                        <el-option label="阴" value="阴" />
                    </el-select>
                </el-form-item>
                <el-form-item label="环境" :label-width="formLabelWidth">
                    <el-select v-model="form.bgplace" placeholder="请选择室内/室外/阳台">
                        <el-option label="室内" value="室内" />
                        <el-option label="室外" value="室外" />
                        <el-option label="阳台" value="阳台" />
                    </el-select>
                </el-form-item>
            </el-form> -->
            <el-button type="primary">
                <input type="file" value="" id="file" />
            </el-button>
            <div class="el-upload__tip">只能上传图片文件；</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="onSaveInfo">
                        提交
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import {
    Guide,
    PictureFilled,
    User,
    HomeFilled,
    ChatLineSquare,
    Apple,
    Document,
    List,
    Tools,
    ShoppingCart,
    CollectionTag,
    Finished,
    InfoFilled,
    Cherry,
    Goods,
    Sell,
    ShoppingCartFull,
    Van,
    Sunrise,
    StarFilled,
    EditPen,
    Edit,
    Promotion,
    Grape,
    Pear,
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
const formLabelWidth = '140px';
const filterHandler = (
    value,
    row,
    column
) => {
    const property = column['property']
    return row[property] === value
}
</script>
<script>

export default {
    data() {
        return {
            baseURL: 'http://localhost:8080',
            weatherChosen: '晴/雨/阴',
            placeChosen: '室内/室外/阳台',
            weatherOptions: [
                {
                    value: '晴',
                    label: '晴',
                },
                {
                    value: '雨',
                    label: '雨',
                },
                {
                    value: '阴',
                    label: '阴',
                },
            ],
            placeOptions: [
                {
                    value: '室内',
                    label: '室内',
                },
                {
                    value: '室外',
                    label: '室外',
                },
                {
                    value: '阳台',
                    label: '阳台',
                },
            ],
            formInline: {
                bgid: 0,
                bgimg: '',
                bgweather: '晴/雨/阴',
                bgplace: '室内/室外/阳台'
            },
            checkformInline: {
                bgid: 0,
                bgimg: '',
                bgweather: '晴/雨/阴',
                bgplace: '室内/室外/阳台'
            },
            dialogFormVisible: false,
            showSearch: false,
            tableData: [],
            tableDataStore: [],
            tableimgList: [],
            tableimg: '',
            bg: {
                bgid: 1,
                bgimg: '',
                bgweather: '晴/雨/阴',
                bgplace: '室内/室外/阳台'
            },
            basedata: '',
            form: {
                bgid: 1,
                bgimg: '',
                bgweather: '晴/雨/阴',
                bgplace: '室内/室外/阳台'
            },
            searchForm: [],
            filetype: [
                "jpg",
                "jpeg",
                "png",
            ],
            weatherChange: 9,
            placeChange: 9,
            page: 1, // 当前页码
            total: 0, // 总条数
            size: 10, // 每页的数据条数
            reallyTable: [],
            selData: [],
        }
    },
    methods: {
        init() {
            axios({
                method: 'post',
                url: 'http://localhost:8080/background/getbackground',
                withCredentials: true,
            }).then(res => {
                this.tableData = res.data.data;
                this.tableDataStore = res.data.data;
                console.log(res.data.data);
                this.tableData = res.data.data.slice(
                    (this.page - 1) * this.size,
                    this.page * this.size
                );
                this.total = res.data.data.length;
                this.selData = res.data.data;
                for (var i = 0; i < res.data.data.length; i++) {
                    this.tableimgList.push(res.data.data[i].bgimg);
                    this.getWeather(i);
                    this.getPlace(i);
                }
                //console.log("tableimglist:" + this.tableimgList);
                this.tableimg = this.tableimgList[0];
                //console.log("tableimg：-------->" + this.tableimg);
            })
        },
        search() {
            this.weatherChosen == '晴' ? this.weatherChange = 1 : (this.weatherChosen == '雨' ? this.weatherChange = 2 : this.weatherChange = 3);
            this.placeChosen == '室内' ? this.placeChange = 1 : (this.placeChosen == '室外' ? this.placeChange = 2 : this.placeChange = 3);
            let arr = []
            console.log(this.tableDataStore.length)
            for (let i = 0; i < this.tableDataStore.length; i++) {
                if (String(this.tableDataStore[i].bgweather).includes(this.weatherChange) &&
                    String(this.tableDataStore[i].bgplace).includes(this.placeChange)) {
                    arr.push(this.tableDataStore[i])
                }
            }
            console.log(arr);
            this.tableData = arr.slice(
                (this.page - 1) * this.size,
                this.page * this.size
            );
            this.selData = arr;
            this.total = arr.length;
        },
        //删除表格行
        handleDelete(index, row) {
            console.log(index, row);
            console.log(row.bgid);//可以获取到
            ElMessageBox.confirm(
                '确认删除本项吗？删除后无法找回:-0',
                'Warning',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    axios({
                        method: 'post',
                        url: 'http://localhost:8080/background/delbgbackend',
                        withCredentials: true,
                        data: {
                            bgid: row.bgid,
                        },
                    }).then(res => {
                        this.tableData = res.data.data;
                        this.tableDataStore = res.data.data;
                        console.log(res.data.data);
                        this.tableData = res.data.data.slice(
                            (this.page - 1) * this.size,
                            this.page * this.size
                        );
                        this.total = res.data.data.length;
                        this.selData = res.data.data;
                        for (var i = 0; i < res.data.data.length; i++) {
                            this.tableimgList.push(res.data.data[i].bgimg);
                            this.getWeather(i);
                            this.getPlace(i);
                        }
                        //console.log("tableimglist:" + this.tableimgList);
                        this.tableimg = this.tableimgList[0];
                        //console.log("tableimg：-------->" + this.tableimg);
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                    })
                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除操作',
                    })
                })
        },
        //编辑表格行
        handleEdit(index, row) {
            console.log(index, row);
            this.dialogFormVisible = true;
            axios({
                method: 'post',
                url: 'http://localhost:8080/background/getsingle',
                withCredentials: true,
                data: {
                    bgid: index
                },
            }).then(res => {
                this.form = row;
            })
        },
        onSaveInfo() {
            console.log("uploadimgToken");
            this.form.bgweather == '晴' ? this.weatherChange = 1 : (this.form.bgweather == '雨' ? this.weatherChange = 2 : this.weatherChange = 3);
            // alert('weather!' + this.weatherChange);
            this.form.bgplace == '室内' ? this.placeChange = 1 : (this.form.bgplace == '室外' ? this.placeChange = 2 : this.placeChange = 3);
            //上传图片到数据库
            var file = document.querySelector("#file").files[0];

            if (file) {
                var extension = file.name.split('.').pop().toLowerCase();
                var isSuccess = this.filetype.indexOf(extension) > -1;
                if (isSuccess) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = (e) => {
                        console.log("file:" + file);
                        console.log(e.target.result);

                        axios({
                            method: 'post',
                            url: 'http://localhost:8080/background/uploadimg',
                            withCredentials: true,
                            data: {
                                bgid: this.form.bgid,
                                bgweather: this.weatherChange,
                                bgplace: this.placeChange,
                                bgimg: e.target.result
                            },
                        }).then(res => {
                            if (res.data.code == 200) {
                                console.log(999999999);
                                this.init()
                            }
                            // this.tableData = res.data.data;
                            // this.tableDataStore = res.data.data;
                            // console.log(res.data.data);
                            // this.tableData = res.data.data.slice(
                            //     (this.page - 1) * this.size,
                            //     this.page * this.size
                            // );
                            // this.total = res.data.data.length;
                            // this.selData = res.data.data;
                            // for (var i = 0; i < res.data.data.length; i++) {
                            //     this.tableimgList.push(res.data.data[i].bgimg);
                            //     this.getWeather(i);
                            //     this.getPlace(i);
                            // }
                            // //console.log("tableimglist:" + this.tableimgList);
                            // this.tableimg = this.tableimgList[0];
                            // //console.log("tableimg：-------->" + this.tableimg);
                        })
                    }
                } else {
                    alert("请选择图片文件");
                }
            } else {
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/background/uploadnoimg',
                    withCredentials: true,
                    data: {
                        bgid: this.form.bgid,
                        bgweather: this.weatherChange,
                        bgplace: this.placeChange,
                    },
                }).then(res => {
                    this.tableData = res.data.data;
                    this.tableDataStore = res.data.data;
                    console.log(res.data.data);
                    this.tableData = res.data.data.slice(
                        (this.page - 1) * this.size,
                        this.page * this.size
                    );
                    this.total = res.data.data.length;
                    this.selData = res.data.data;
                    for (var i = 0; i < res.data.data.length; i++) {
                        this.tableimgList.push(res.data.data[i].bgimg);
                        this.getWeather(i);
                        this.getPlace(i);
                    }
                    //console.log("tableimglist:" + this.tableimgList);
                    this.tableimg = this.tableimgList[0];
                    //console.log("tableimg：-------->" + this.tableimg);
                })
            }

            this.dialogFormVisible = false;

        },
        getWeather(index) {
            return this.tableData[index].bgweather == 1 ? this.tableData[index].bgweather = '晴' : (this.tableData[index].bgweather == 2 ? this.tableData[index].bgweather = '雨' : this.tableData[index].bgweather = '阴')
        },
        getPlace(index) {
            return this.tableData[index].bgplace == 1 ? this.tableData[index].bgplace = '室内' : (this.tableData[index].bgplace == 2 ? this.tableData[index].bgplace = '室外' : this.tableData[index].bgplace = '阳台')
        },
        async handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.page = val
            this.tableData = this.selData.slice(
                (this.page - 1) * this.size,
                this.page * this.size
            );
            // this.currentPage = val;
            const data = { 'page': val }
            // await this.onload(data)
        },
    },
    mounted() {
        //页面加载完成后，将数据库内的内容赋给定义的data变量
        this.init()
    }
}
</script>
<style scoped>
#sidepart {
    width: 100%;
    position: absolute;
    top: 5px;
    font-family: '华文中宋';
}

#mainpart {
    width: 100%;
    position: absolute;
    top: 20px;
    /* left: 260px; */
    font-family: '华文中宋';
}

/* dialog */
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}

#spanpart {
    font-size: 30px;
    font-family: '华文中宋';
}

#spanlittlepart {
    font-size: 15px;
    color: cadetblue;
    font-family: '华文中宋';
}

.spaninput {
    width: 400px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-right: 10px;
    margin-top: 10px;
}

.spaninputt {
    width: 400px;
    position: relative;
    top: -42px;
    left: 400px;
    margin-right: 10px;
    margin-top: 10px;
}

.spaninputttext {
    width: 400px;
    position: relative;
    top: 0px;
    left: 0px;
    margin-right: 10px;
    margin-top: 10px;
}
</style>